<template>
  <el-row :gutter="20">
    <el-row class="statistics-title relative">
      <el-col :span="4">
        <h1 class="fs18 pl20 text-bold inline-block">数据概况</h1>
      </el-col>
      <el-col :span="4">
        <div style="top: 0;" class="filter-btn pointer" @click="handleSwitchBLF">
          <i class="fa fa-filter fa-2x filter" aria-hidden="true" style="color: #409EFF;"></i>
          <span style="color: #409EFF;" class="fs16">过滤</span>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="block broken-line-filter" v-if="showBrokenLineFilter">
          <el-date-picker
            v-model="value"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions2"
            value-format="yyyy-MM-dd"
            size="mini"
            @change="updateData"
          ></el-date-picker>
        </div>
      </el-col>
    </el-row>
    <el-col :span="5" class="relative" v-if="lineType.includes('_package')">
      <div class="grid-content bg-purple" id="package"></div>
      <div class="float-box">
        <div class="info white brokenLinefs">
          <h1 class>{{this.total._package}}个</h1>
          <p class="fs12">分配电话量</p>
        </div>
      </div>
    </el-col>
    <el-col :span="5" class="relative" v-if="lineType.includes('WOrdertaking')">
      <div class="grid-content bg-purple" id="W-ordertaking"></div>
      <div class="float-box">
        <div class="info white brokenLinefs">
          <h1 class>{{this.total.WOrdertaking}}个</h1>
          <p class="fs12">接单量</p>
        </div>
      </div>
    </el-col>
    <el-col :span="5" class="relative" v-if="lineType.includes('ROrdertaking')">
      <div class="grid-content bg-purple" id="R-ordertaking"></div>
      <div class="float-box">
        <div class="info white brokenLinefs">
          <h1 class>{{this.total.ROrdertaking}}个</h1>
          <p class="fs12">接单量</p>
        </div>
      </div>
    </el-col>
    <el-col :span="5" class="relative" v-if="lineType.includes('visit')">
      <div class="grid-content bg-purple" id="visit"></div>
      <div class="float-box">
        <div class="info white brokenLinefs">
          <h1 class>{{this.total.visit}}个</h1>
          <p class="fs12">上门量</p>
        </div>
      </div>
    </el-col>
    <el-col :span="5" class="relative" v-if="lineType.includes('sign')">
      <div class="grid-content bg-purple" id="sign"></div>
      <div class="float-box">
        <div class="info white brokenLinefs">
          <h1 class>{{this.total.sign}}个</h1>
          <p class="fs12">签单量</p>
        </div>
      </div>
    </el-col>
    <el-col :span="5" class="relative" v-if="lineType.includes('pass')">
      <div class="grid-content bg-purple" id="pass"></div>
      <div class="float-box">
        <div class="info white brokenLinefs">
          <h1 class>{{this.total.pass}}个</h1>
          <p class="fs12">审过量</p>
        </div>
      </div>
    </el-col>
    <el-col :span="5" class="relative" v-if="lineType.includes('passSum')">
      <div class="grid-content bg-purple" id="pass-sum"></div>
      <div class="float-box">
        <div class="info white brokenLinefs">
          <h1 class>{{this.total.pass_sum}}元</h1>
          <p class="fs12">审过金额</p>
        </div>
      </div>
    </el-col>
    <el-col
      :span="5"
      class="relative"
      v-if="lineType.includes('pickCarW')||lineType.includes('pickCarR')||lineType.includes('pickCarA')"
    >
      <div class="grid-content bg-purple" id="pick_car"></div>
      <div class="float-box">
        <div class="info white brokenLinefs">
          <h1 class>{{this.total.pick_car}}个</h1>
          <p class="fs12">提车量</p>
        </div>
      </div>
    </el-col>
    <el-col :span="4" class="relative" v-if="lineType.includes('finances')">
      <div class="grid-content bg-purple" id="finance">
        <div class="float-box market-charge">
          <div class="info white brokenLinefs">
            <span class="fs12">市场费：</span>
            <h1 class="inline-block">{{this.total.finance.market_charge}}元</h1>
          </div>
        </div>
        <div class="float-box charge">
          <div class="info white brokenLinefs">
            <span class="fs12">实际收费：</span>
            <h1 class="inline-block">{{this.total.finance.charge}}元</h1>
          </div>
        </div>
      </div>
    </el-col>
    <el-col :span="4" class="relative" v-if="lineType.includes('charge')">
      <div class="grid-content bg-purple" id="charge"></div>
      <div class="float-box market-charge">
        <div class="info white brokenLinefs">
          <span class="fs12">收费笔数：</span>
          <h1 class="inline-block">{{this.total.charge_amount}}个</h1>
        </div>
      </div>
      <div class="float-box charge">
        <div class="info white brokenLinefs">
          <span class="fs12">实际收费：</span>
          <h1 class="inline-block">{{this.total.charge_sum}}元</h1>
        </div>
      </div>
    </el-col>
    <el-col :span="5" class="relative" v-if="lineType.includes('checkOut')">
      <div class="grid-content bg-purple" id="check_out"></div>
      <div class="float-box">
        <div class="info white brokenLinefs">
          <h1 class>{{this.total.check_out}}个</h1>
          <p class="fs12">结账量</p>
        </div>
      </div>
    </el-col>
    <el-col :span="5" class="relative" v-if="lineType.includes('chargeSum')">
      <div class="grid-content bg-purple" id="charge-sum"></div>
      <div class="float-box">
        <div class="info white brokenLinefs">
          <h1 class>{{this.total.charge_sum}}元</h1>
          <p class="fs12">收费</p>
        </div>
      </div>
    </el-col>
    <el-col :span="5" class="relative" v-if="lineType.includes('achievement')">
      <div class="grid-content bg-purple" id="achievement"></div>
      <div class="float-box">
        <div class="info white brokenLinefs">
          <h1 class>{{this.total.achievement}}元</h1>
          <p class="fs12">净业绩</p>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import {
  option1,
  option2,
  option3,
  option4,
  option5,
  option12,
  option16,
  option17,
  option18,
  option20,
  option23,
  option24,
  option25,
  pickerOptions2
} from "@/../config/Stats_options";
import { getMonthStartDate, getMonthEndDate } from "@/utils/getCurrMonth";

export default {
  name: "brokenLine",
  data() {
    return {
      pickerOptions2,
      showBrokenLineFilter: false,
      total: {
        _package: 0,
        visit: 0,
        pick_car: 0,
        sign: 0,
        pass: 0,
        charge_amount: 0,
        WOrdertaking: 0,
        ROrdertaking: 0,
        check_out: 0,
        charge_sum: 0,
        pass_sum: 0,
        achievement: 0,
        finance: {
          market_charge: 0,
          charge: 0
        }
      },
      value: [getMonthStartDate(), getMonthEndDate()]
    };
  },
  mounted() {
    if (this.lineType.includes("_package")) {
      this.getPackages();
    }
    if (this.lineType.includes("visit")) {
      this.getVisits();
    }
    if (this.lineType.includes("sign")) {
      this.getSigns();
    }
    if (this.lineType.includes("pickCarW")) {
      this.getPickCars("warrant");
    }
    if (this.lineType.includes("pickCarR")) {
      this.getPickCars("resoures");
    }
    if (this.lineType.includes("pickCarA")) {
      this.getPickCars("all");
    }
    if (this.lineType.includes("pass")) {
      this.getPass();
    }
    if (this.lineType.includes("passSum")) {
      this.getPassSum();
    }
    if (this.lineType.includes("finances")) {
      this.getFinances();
    }
    if (this.lineType.includes("charge")) {
      this.getCharges();
    }
    if (this.lineType.includes("WOrdertaking")) {
      this.getWOrdertakings();
    }
    if (this.lineType.includes("ROrdertaking")) {
      this.getROrdertakings();
    }
    if (this.lineType.includes("checkOut")) {
      this.getCheckOuts();
    }
    if (this.lineType.includes("achievement")) {
      this.getAchievements();
    }
    if (this.lineType.includes("chargeSum")) {
      this.getChargesSum();
    }
  },
  props: ["lineType"],
  methods: {
    handleSwitchBLF() {
      this.showBrokenLineFilter = !this.showBrokenLineFilter;
    },
    getPackages() {
      option1.xAxis.data = [];
      this.total._package = 0;
      this.$axios
        .get(
          `/api/statistics/Stats_pakages/?from=${this.value[0]}&to=${
            this.value[1]
          }`
        )
        .then(data => {
          option1.xAxis.data = data.day;
          option1.series[0].data = data.total;
          this.total._package = data.totalSum;
        })
        .then(() => {
          this.updatePackage();
        });
    },
    getVisits() {
      option2.xAxis.data = [];
      this.total.visit = 0;
      this.$axios
        .get(
          `/api/statistics/Stats_visits/?from=${this.value[0]}&to=${
            this.value[1]
          }`
        )
        .then(data => {
          option2.xAxis.data = data.day;
          option2.series[0].data = data.amount;
          this.total.visit = data.totalSum;
        })
        .then(() => {
          this.updateVisit();
        });
    },
    getSigns() {
      option3.xAxis.data = [];
      this.total.sign = 0;
      this.$axios
        .get(
          `/api/statistics/Stats_signs/?from=${this.value[0]}&to=${
            this.value[1]
          }`
        )
        .then(data => {
          option3.xAxis.data = data.day;
          option3.series[0].data = data.amount;
          this.total.sign = data.totalSum;
        })
        .then(() => {
          this.updateSign();
        });
    },
    getPickCars(type) {
      option4.xAxis.data = [];
      this.total.pick_car = 0;
      this.$axios
        .get(
          `/api/statistics/Stats_pickCars/?from=${this.value[0]}&to=${
            this.value[1]
          }&type=${type}`
        )
        .then(data => {
          option4.xAxis.data = data.day;
          option4.series[0].data = data.amount;
          this.total.pick_car = data.totalSum;
        })
        .then(() => {
          this.updatePickCar();
        });
    },
    getFinances() {
      this.total.finance.market_charge = 0;
      this.total.finance.charge = 0;
      this.$axios
        .get(
          `/api/statistics/Stats_finances/?from=${this.value[0]}&to=${
            this.value[1]
          }`
        )
        .then(data => {
          this.total.finance.charge = data.result1;
          this.total.finance.market_charge = data.result2;
        });
    },
    getCharges() {
      this.total.charge_amount = this.total.charge_sum = 0;
      this.$axios
        .get(
          `/api/statistics/Stats_charges/?from=${this.value[0]}&to=${
            this.value[1]
          }`
        )
        .then(data => {
          this.total.charge_amount = data.result1;
          this.total.charge_sum = data.result2;
        });
    },
    getChargesSum() {
      option17.xAxis.data = [];
      this.total.charge_sum = 0;
      this.$axios
        .get(
          `/api/statistics/Stats_chargesSum/?from=${this.value[0]}&to=${
            this.value[1]
          }`
        )
        .then(data => {
          option17.xAxis.data = data.day;
          option17.series[0].data = data.sum;
          this.total.charge_sum = data.totalSum;
        })
        .then(() => {
          this.updateChargeSum();
        });
    },
    getCheckOuts() {
      option16.xAxis.data = [];
      option16.series[0].data = [];
      this.total.checkOut = 0;
      this.$axios
        .get(
          `/api/statistics/Stats_checkOuts/?from=${this.value[0]}&to=${
            this.value[1]
          }`
        )
        .then(data => {
          option16.xAxis.data = data.day;
          option16.series[0].data = data.amount;
          this.total.check_out = data.totalSum;
        })
        .then(() => {
          this.updateCheckOut();
        });
    },
    getPass() {
      option12.xAxis.data = [];
      option12.series[0].data = [];
      this.total.pass = 0;
      this.$axios
        .get(
          `/api/statistics/Stats_pass/?from=${this.value[0]}&to=${
            this.value[1]
          }`
        )
        .then(data => {
          option12.xAxis.data = data.day;
          option12.series[0].data = data.amount;
          this.total.pass = data.totalSum;
        })
        .then(() => {
          this.updatePass();
        });
    },
    getPassSum() {
      option25.xAxis.data = [];
      option25.series[0].data = [];
      this.total.pass_sum = 0;
      this.$axios
        .get(
          `/api/statistics/Stats_passSum/?from=${this.value[0]}&to=${
            this.value[1]
          }`
        )
        .then(data => {
          option25.xAxis.data = data.day;
          option25.series[0].data = data.sum;
          this.total.pass_sum = data.totalSum;
        })
        .then(() => {
          this.updatePassSum();
        });
    },
    getAchievements() {
      option18.xAxis.data = [];
      this.total.achievement = 0;
      this.$axios
        .get(
          `/api/statistics/Stats_achievements/?from=${this.value[0]}&to=${
            this.value[1]
          }`
        )
        .then(data => {
          option18.xAxis.data = data.day;
          option18.series[0].data = data.sum;
          this.total.achievement = data.totalSum;
        })
        .then(() => {
          this.updateAchievement();
        });
    },
    getWOrdertakings() {
      option20.xAxis.data = [];
      option20.series[0].data = [];
      this.total.WOrdertakings = 0;
      this.$axios
        .get(
          `/api/statistics/Stats_warrantOrdertakings/?from=${
            this.value[0]
          }&to=${this.value[1]}`
        )
        .then(data => {
          option20.xAxis.data = data.day;
          option20.series[0].data = data.amount;
          this.total.WOrdertaking = data.totalSum;
        })
        .then(() => {
          this.updateWOrdertaking();
        });
    },
    getROrdertakings() {
      option24.xAxis.data = [];
      option24.series[0].data = [];
      this.total.ROrdertakings = 0;
      this.$axios
        .get(
          `/api/statistics/Stats_resourceOrdertakings/?from=${
            this.value[0]
          }&to=${this.value[1]}`
        )
        .then(data => {
          option24.xAxis.data = data.time;
          option24.series[0].data = data.amount;
          this.total.ROrdertaking = data.totalSum;
        })
        .then(() => {
          this.updateROrdertaking();
        });
    },
    updatePackage() {
      let _package = this.$echarts.init(document.getElementById("package"));
      _package.setOption(option1, true);
    },
    updateVisit() {
      let visit = this.$echarts.init(document.getElementById("visit"));
      visit.setOption(option2, true);
    },
    updateCheckOut() {
      let checkOut = this.$echarts.init(document.getElementById("check_out"));
      checkOut.setOption(option16, true);
    },
    updateAchievement() {
      let achievement = this.$echarts.init(
        document.getElementById("achievement")
      );
      achievement.setOption(option18, true);
    },
    updateSign() {
      let sign = this.$echarts.init(document.getElementById("sign"));
      sign.setOption(option3, true);
    },
    updatePass() {
      let pass = this.$echarts.init(document.getElementById("pass"));
      pass.setOption(option12, true);
    },
    updatePassSum() {
      let passSum = this.$echarts.init(document.getElementById("pass-sum"));
      passSum.setOption(option25, true);
    },
    updateChargeSum() {
      let chargeSum = this.$echarts.init(document.getElementById("charge-sum"));
      chargeSum.setOption(option17, true);
    },
    updateWOrdertaking() {
      let WOrdertaking = this.$echarts.init(
        document.getElementById("W-ordertaking")
      );
      WOrdertaking.setOption(option20, true);
    },
    updateROrdertaking() {
      let ROrdertaking = this.$echarts.init(
        document.getElementById("R-ordertaking")
      );
      ROrdertaking.setOption(option24, true);
    },
    updatePickCar() {
      let pick_car = this.$echarts.init(document.getElementById("pick_car"));
      pick_car.setOption(option4, true);
    },
    updateData() {
      if (this.lineType.includes("_package")) {
        this.getPackages();
      }
      if (this.lineType.includes("visit")) {
        this.getVisits();
      }
      if (this.lineType.includes("sign")) {
        this.getSigns();
      }
      if (this.lineType.includes("pass")) {
        this.getPass();
      }
      if (this.lineType.includes("passSum")) {
        this.getPassSum();
      }
      if (this.lineType.includes("pickCarW")) {
        this.getPickCars("warrant");
      }
      if (this.lineType.includes("pickCarR")) {
        this.getPickCars("resoures");
      }
      if (this.lineType.includes("pickCarA")) {
        this.getPickCars("all");
      }
      if (this.lineType.includes("finances")) {
        this.getFinances();
      }
      if (this.lineType.includes("charge")) {
        this.getCharges();
      }
      if (this.lineType.includes("WOrdertaking")) {
        this.getWOrdertakings();
      }
      if (this.lineType.includes("ROrdertaking")) {
        this.getROrdertakings();
      }
      if (this.lineType.includes("checkOut")) {
        this.getCheckOuts();
      }
      if (this.lineType.includes("achievement")) {
        this.getAchievements();
      }
      if (this.lineType.includes("chargeSum")) {
        this.getChargesSum();
      }
    }
  }
};
</script>
<style>
</style>